iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
1
Modern Web

UI/UX/ProtoPie入門-喵喵設計師的學習日記系列 第 13

DAY 13-Daily UI 002 Checkout 實作分享(三)

  • 分享至 

  • xImage
  •  

上一篇已經完成前兩個Artboard,這一篇會繼續做下一個Artboard的分享。

這個Artboard是想要設計成點開付款方式的VISA會變大展開成一張VISA卡的樣子,上面有欄位讓使用者填寫付款資訊,讓使用者有真的在使用VISA卡付款的感覺。那我們一樣開一個新的Artboard,把需要的物件都複製過去,因為VISA會變大張,所以先拉一個框表示VISA卡的大小,把付款方式的框也一起拉長,上面的框往上推。
https://ithelp.ithome.com.tw/upload/images/20181028/20112491T43amEulF1.png

把訂購資料的框拉小道差不多原本的位置,超過框的物件就刪掉,再拉一個方形色快把超出去的地方遮掉,模擬框滑上去會被遮掉的效果。

接下來做下面的VISA卡,想要模擬真的VISA卡,找了下面的圖片當參考。
https://ithelp.ithome.com.tw/upload/images/20181028/20112491zwnwhmMYJ1.png

底色用紫藍色,把原本的VISA logo 放到卡片上方,,把需要使用者填寫的項目放上來。
https://ithelp.ithome.com.tw/upload/images/20181028/20112491hHAe9AelJW.png

把填寫框加上,在右下角放一個小VISA讓整個感覺更擬真,最後在右上角加上叉叉,讓使用者可以關閉VISA卡。
https://ithelp.ithome.com.tw/upload/images/20181028/20112491esOnVagprK.png

今天就到這囉,下一篇會把剩下的頁面都分享完,掰喵!


上一篇
DAY 12-Daily UI 002 Checkout 實作分享(二)
下一篇
DAY 14-Daily UI 002 Checkout 實作分享(四)
系列文
UI/UX/ProtoPie入門-喵喵設計師的學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言